/**
 * 发起支付前确认订单弹窗
 */
import React, { useEffect, useState } from 'react';
import { Descriptions, Modal, Divider, Button, Row, Col } from 'antd'
import { showMsg, isNull } from '@/utils/utils';
import ProTable from '@ant-design/pro-table';
import type { ProColumns } from '@ant-design/pro-table';
import QRCode from 'qrcode.react';

const PayDialog: React.FC<any> = (props) => {
  const {
    patientInfo = {},
    handleModalVisible,
    goodsList = [],
    settleInfo = {},
    onPrint,
  } = props;
  const [loading, setLoading] = useState(false);
  // 商品数量
  const [goodsNum, setGoodsNum] = useState<number>(0);
  // 是否弹出打印窗口
  const [printing, setPrinting] = useState(false);

  const columns: ProColumns<any>[] = [
    {
      title: '商品名称',
      dataIndex: 'goods_name'
    },
    {
      title: '商品编号',
      dataIndex: 'goods_id'
    },
    {
      title: '规格（单位）',
      dataIndex: 'specs_name'
    },
    {
      title: '单价',
      dataIndex: 'price',
      valueType: 'money',
      align: 'right',
      width: 90
    },
    {
      title: '数量',
      dataIndex: 'goods_num'
    },
    {
      title: '价格',
      dataIndex: 'goods_total_price',
      valueType: 'money',
      align: 'right',
      width: 90
    },
  ]

  useEffect(() => {
    console.info('::::: ', patientInfo);
    if (goodsList.length) {
      let num = 0;
      goodsList.forEach(item => {
        num += item.goods_num;
        setGoodsNum(num);
      })
    }
  }, [goodsList])

  // 打印
  const printPage = () => {
    setPrinting(true);
    setTimeout(() => {
      print(document.querySelector('.order-modal .ant-modal-body'), {
        // printZoom: 0.9
        size: 'portrait'
      });
      setTimeout(() => {
        setPrinting(false);
      }, 5000);
    }, 1500);
  }


  console.log('settleInfo', settleInfo);
  console.log('goodsList', goodsList);

  return <Modal
    title="订单详情"
    wrapClassName="order-modal"
    width="90%"
    bodyStyle={{ height: printing ? 'auto' : window.innerHeight - 185, overflowY: printing ? 'auto' : 'scroll' }}
    maskClosable={false}
    onCancel={() => handleModalVisible(false)}
    footer={[
      <Button key="close" onClick={() => {
        handleModalVisible(false);
      }}>
        关闭
      </Button>,
      <Button loading={loading} key="pay" type="primary" onClick={() => {
        // printPage()
        onPrint();
      }}>
        订单打印
      </Button>
    ]}
    visible>
    <div className="order-modal-content" style={{ width: printing ? '80%' : '100%', transform: printing ? 'scale(0.85)' : 'scale(1)', transformOrigin: '0 0' }}>
      <div className='print_yes print_title'>缴费单</div>
      <Divider className='print_yes' style={{ paddingBottom: 15 }} />
      <div className="dialog">
        <div className='common_title'>1.患者信息</div>
        <Divider style={{ margin: '10px 0' }} />
        <Descriptions column={4}>
          <Descriptions.Item label="身份证/住院号">
            {patientInfo.admission_num}{patientInfo.admission_num && patientInfo.identity_no ? ' / ' : ''}{patientInfo.identity_no}
          </Descriptions.Item>
          <Descriptions.Item label="患者姓名">
            {patientInfo.patient_name}
          </Descriptions.Item>
          <Descriptions.Item label="归属科室">
            {patientInfo.create_dept_name || settleInfo.create_dept_name}
          </Descriptions.Item>
          <Descriptions.Item label="开单人">{settleInfo.apply_oper_name || '无'}</Descriptions.Item>
        </Descriptions>
        <div className='common_title'>2.商品信息</div>
        <Divider style={{ margin: '10px 0' }} />

        <ProTable<STOCKGOODSAPI.GoodsItem>
          rowKey="goods_id"
          columns={columns}
          options={false}
          search={false}
          pagination={false}
          scroll={{ x: 1000 }}
          dataSource={settleInfo.goodsList}
          bordered />

        <div className='common_title' style={{ marginTop: 10 }}>3.订单汇总</div>
        <Divider style={{ margin: '10px 0' }} />
        <Row>
          <Col span={18}>
            <Descriptions>
              <Descriptions.Item label="订单编号">{settleInfo.order_id}</Descriptions.Item>
              <Descriptions.Item label="创建时间">{settleInfo.create_date + ' ' + settleInfo.create_time}</Descriptions.Item>
              <Descriptions.Item label="商品数量">
                <span style={{ color: '#F5232D', fontWeight: 'bold' }}>{goodsNum}</span>（件）
              </Descriptions.Item>
              <Descriptions.Item label="订单金额">{settleInfo.goods_total_price}（元）</Descriptions.Item>
            </Descriptions>
          </Col>
          <Col span={6}>
            <Descriptions style={{ flex: '0.5', float: 'right' }} className='print_ewm'>
              <Descriptions.Item label="订单二维码">
                <img src={settleInfo.qr_code} width={120} height={120} />
              </Descriptions.Item>
            </Descriptions>
          </Col>
        </Row>
      </div>
    </div>
  </Modal>
}
export default PayDialog;
